<!-- getList 页 -->
<template>
  <div class="app-container">

    <div style="margin-bottom: 20px;">
      <BusinessOption v-model="businessName" />
      <ProductOption v-model="productName" />
      <CheckStateOption v-model="selectedCheck" />
      <ShowStateOption v-model="selectedShow" />
      <DelStateOption v-model="selectedDel" />

      <el-button
        :loading="searchLoading"
        style=""
        type="primary"
        icon="el-icon-search"
        @click="search"
      >
        搜索
      </el-button>
      <!-- <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
        <el-tag type="info">Documentation</el-tag>
      </a> -->
    </div>

    <el-table
      v-loading="listLoading"
      element-loading-text="加载中..."
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- <el-table-column align="center"
                       label="ID"
                       width="80px">
        <template slot-scope="{row}">
          <span>{{ row._id }}</span>
        </template>
      </el-table-column> -->

      <el-table-column
        align="center"
        label="创建时间"
        width="180px"
      >
        <template slot-scope="{row}">
          <span>{{ row.created_at|formatTimer }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="商品名称"
        min-width="360px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="提交人 (店铺名)"
        width="200px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.business.company_name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        align="center"
        label="审核状态"
        width="110px"
      >
        <template slot-scope="{row}">
          <el-tag
            v-if="row.is_check==0"
            type="info"
          >
            待审核
          </el-tag>
          <el-tag
            v-if="row.is_check==2"
            type="danger"
          >
            审核失败
          </el-tag>
          <el-tag
            v-if="row.is_check==1"
            type="success"
          >
            审核通过
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        align="center"
        label="上架状态"
        width="110px"
      >
        <template slot-scope="{row}">
          <el-tag
            v-if="row.is_show==0"
            type="info"
          >
            未上架
          </el-tag>
          <el-tag
            v-if="row.is_show==1"
            type="success"
          >
            已上架
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        align="center"
        label="删除状态"
        width="110px"
      >
        <template slot-scope="{row}">
          <el-tag v-if="row.is_del==0">
            未删除
          </el-tag>
          <el-tag
            v-if="row.is_del==1"
            type="danger"
          >
            已删除
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        width="140px"
      >
        <template slot-scope="scope">
          <!-- <router-link :to="'/product/list/edit/'+scope.row._id"
                       style="margin: 0 5px 0 5px;">
            <el-button type="text"
                       size="small"
                       icon="el-icon-search">
              查看
            </el-button>
          </router-link> -->

          <el-button
            type="text"
            size="small"
            icon="el-icon-search"
            @click="search(scope.row._id)"
          >
            查看
          </el-button>

          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose"
          >
            <!-- <div>
              <el-form ref="form"
                       :model="productInfo">
                <el-row :gutter="24">
                  <el-col :span="24"
                          :offset="0">

                    <el-form-item label="活动名称">
                      <el-input :model="productInfo.name" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24"
                          :offset="0">

                    ww1312</el-col>
                </el-row>
              </el-form>

            </div> -->
            <ProductInfo
              :info.sync="productInfo"
              :value="productFromValue"
              :group="productFromGroup"
              :image="productInfoSliderImage"
              :fiex_group="fixedFromGroup"
              :fiex_value="fixedFromValue"
            />

            <span
              slot="footer"
              class="dialog-footer"
            >

              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="dialogVisible = false"
              >确 定</el-button>
            </span>
          </el-dialog>

          <router-link
            :to="'/product/list/edit/'+scope.row._id"
            style="margin: 0 5px 0 5px;"
          >
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
            >
              修改
            </el-button>
          </router-link>
        </template>
      </el-table-column>

    </el-table>

  </div>

</template>

<script>
import BusinessOption from './components/BusinessOption.vue'
import ProductOption from './components/ProductOption.vue'
import CheckStateOption from './components/CheckStateOption.vue'
import ShowStateOption from './components/ShowStateOption.vue'
import DelStateOption from './components/DelStateOption.vue'
import ProductInfo from './components/ProductInfo.vue'

export default {
  name: 'GetList',
  components: { BusinessOption, ProductOption, CheckStateOption, ShowStateOption, DelStateOption, ProductInfo },
  filters: {
    formatTimer: function (value) {
      const date = new Date(value)
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m
    }
  },
  data () {
    return {
      listLoading: true,
      searchLoading: false,
      list: null,
      productInfo: null,
      productInfoSliderImage: [],
      productFromValue: [],
      productFromGroup: [],
      fixedFromGroup: [],
      fixedFromValue: [],
      businessName: '',
      productName: '',
      selectedCheck: '',
      selectedShow: '',
      selectedDel: '',
      data: {},
      dialogVisible: false,
      imgUrls: this.$baseUrl
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    // dateFormat: function (date) {
    //   return moment(date).format('YYYY-MM-DD')
    // },
    getList () {
      this.listLoading = true
      this.$api.product.getProductList(this.data).then(res => {
        this.list = res.data
        this.listLoading = false
      })
    },
    async search () {
      this.searchLoading = true
      this.data.check = this.selectedCheck
      this.data.del = this.selectedDel
      this.data.show = this.selectedShow
      this.data.businessName = this.businessName
      this.data.productName = this.productName
      await this.getList()
      this.searchLoading = false
    },
    search (value) {
      // console.log('search => value', value)
      // console.log('search => list', this.list)
      this.$api.product.getProductInfo(value).then(res => {
        this.productInfo = res.data
        this.productFromValue = res.fromValue
        this.productFromGroup = res.fromGroup
        this.fixedFromGroup = res.fixedFromGroup
        this.fixedFromValue = res.fixedFromValue
        console.log('this.$api.product.getProductInfo => this.fixedFromValue', this.fixedFromValue)
        // console.log('this.$api.product.getProductInfo => this.fixedFromGroup', this.fixedFromGroup)
        // console.log('this.$api.product.getProductInfo => this.productFromGroup', this.productFromGroup)
        console.log('this.$api.product.getProductInfo => this.productFrom', this.productFromValue)
        for (const i in this.productInfo.slider_image) { // 获取商品轮播图
          this.productInfoSliderImage[i] = this.imgUrls + this.productInfo.slider_image[i].img_url
        }
      })
      this.dialogVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    }
  }
}
</script>
